<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>IoT平台 - 日志查询</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div class="container">
    <h1>IoT平台 - 日志查询</h1>
    
    <!-- 导航栏 -->
    <div class="navbar">
      <ul>
        <li><a href="admin-dashboard.html" class="nav-link">管理员面板</a></li>
        <li><a href="logs-query.html" class="nav-link active">日志查询</a></li>
        <li><a href="create-user-page.html">创建用户</a></li>
        <li><a href="search-users-page.html">搜索用户</a></li>
      </ul>
      <div class="user-info">
        <span>管理员: <span id="admin-name"></span> (<span id="admin-role"></span>)</span>
        <button class="logout-btn" onclick="clearToken(); window.location.href='login.html'">退出登录</button>
      </div>
    </div>
    
    <!-- 日志查询页面 -->
    <div id="logs-query-page" class="page">
      <!-- 查询表单 -->
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">日志查询条件</h2>
        </div>
        <form id="logQueryForm" onsubmit="onQueryLogs(event)">
          <div class="form-row">
            <div class="form-group">
              <label>开始时间</label>
              <input type="datetime-local" id="startTime" name="startTime">
            </div>
            <div class="form-group">
              <label>结束时间</label>
              <input type="datetime-local" id="endTime" name="endTime">
            </div>
            <div class="form-group">
              <label>日志类型</label>
              <select id="logType" name="logType">
                <option value="">全部</option>
                <option value="OPERATION">操作日志</option>
                <option value="SYSTEM">系统日志</option>
                <option value="SCHEDULE">调度日志</option>
                <option value="DEVICE">设备日志</option>
              </select>
            </div>
            <div class="form-group">
              <label>日志级别</label>
              <select id="level" name="level">
                <option value="">全部</option>
                <option value="DEBUG">DEBUG</option>
                <option value="INFO">INFO</option>
                <option value="WARN">WARN</option>
                <option value="ERROR">ERROR</option>
                <option value="FATAL">FATAL</option>
              </select>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>模块</label>
              <input type="text" id="module" name="module" placeholder="输入模块名称">
            </div>
            <div class="form-group">
              <label>操作</label>
              <input type="text" id="action" name="action" placeholder="输入操作名称">
            </div>
            <div class="form-group">
              <label>用户ID</label>
              <input type="number" id="userId" name="userId" placeholder="输入用户ID">
            </div>
            <div class="form-group">
              <label>是否成功</label>
              <select id="success" name="success">
                <option value="">全部</option>
                <option value="true">成功</option>
                <option value="false">失败</option>
              </select>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>关键词搜索</label>
              <input type="text" id="keyword" name="keyword" placeholder="输入搜索关键词">
            </div>
            <div class="form-group">
              <label>设备ID</label>
              <input type="text" id="deviceId" name="deviceId" placeholder="输入设备ID">
            </div>
            <div class="form-group">
              <label>机器人ID</label>
              <input type="text" id="robotId" name="robotId" placeholder="输入机器人ID">
            </div>
            <div class="form-group">
              <label>任务ID</label>
              <input type="text" id="taskId" name="taskId" placeholder="输入任务ID">
            </div>
          </div>
          
          <div class="form-actions">
            <button type="submit" class="primary">查询</button>
            <button type="button" class="secondary" onclick="resetQueryForm()">重置</button>
          </div>
        </form>
      </div>
      
      <!-- 日志列表 -->
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">日志列表</h2>
          <div class="card-actions">
            <div class="pagination-info">
              共 <span id="totalCount">0</span> 条记录，每页 
              <select id="pageSize" onchange="onChangePageSize()">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
              </select> 条
            </div>
          </div>
        </div>
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>时间</th>
                <th>类型</th>
                <th>级别</th>
                <th>模块</th>
                <th>操作</th>
                <th>用户ID</th>
                <th>状态</th>
                <th>消息</th>
                <th>关联ID</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="logsTableBody">
              <!-- 日志列表内容将通过JavaScript动态填充 -->
            </tbody>
          </table>
        </div>
        <!-- 分页控件 -->
        <div class="pagination">
          <button id="prevPage" onclick="onPrevPage()" disabled>上一页</button>
          <span id="paginationInfo">第 <span id="currentPage">1</span> 页</span>
          <button id="nextPage" onclick="onNextPage()" disabled>下一页</button>
        </div>
      </div>
      
      <!-- 日志详情模态框 -->
      <div id="logDetailModal" class="modal hidden">
        <div class="modal-content">
          <div class="modal-header">
            <h3>日志详情</h3>
            <button class="close-btn" onclick="closeLogDetailModal()">×</button>
          </div>
          <div class="modal-body">
            <pre id="logDetailContent"></pre>
          </div>
          <div class="modal-footer">
            <button onclick="closeLogDetailModal()">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 引入JavaScript文件 -->
  <script src="js/utils.js" integrity="sha256-..." crossorigin="anonymous"></script>
  <script src="js/logs.js" integrity="sha256-..." crossorigin="anonymous"></script>
</body>
</html>